<template>
    <div class="equipment">
        <div class="monitoring-nav">
            <!-- <div class="left-icon click-pointer" @click="handleLeftBtn"></div> -->
            <div class="css-flex alter-css">
                <el-tabs v-model="active" @tab-click="handleClick">
                    <el-tab-pane :label="item.name" :name="item.indexId" v-for="(item, index) in unit" :key="item.id">
                    </el-tab-pane>
                </el-tabs>
            </div>
            <!-- <div class="right-icon click-pointer" @click="handleRightBtn"></div> -->
        </div>
        <div class="bottom box-content">
            <div class="move-title">{{ activeName }}</div>
            <div class="middle-box">
                <el-button icon="el-icon-plus" @click="add">新增设备</el-button>
            </div>
            <div class="middle">
                设备名称：<el-input v-model="params.name" placeholder="请输入内容"></el-input>
                <el-button icon="el-icon-search" @click="search">查询</el-button>
            </div>
            <publicTable
                :columnData="equipmentColumn"
                :tableData="tableData"
                :maxWidth="true"
                style="width: 100%; height: 100%; flex-grow: 0.2"
            />
            <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :pager-count="5"
                :current-page="params.paged"
                :page-size="params.pageSize"
                @current-change="handleChange"
            />
        </div>
        <public-dialog :dialogVisible.sync="addDialogVisible" :formData="addForm" @submit="addSave" />
        <public-dialog :dialogVisible.sync="editDialogVisible" :formData="editForm" @submit="editSave" />
        <public-dialog :dialogVisible.sync="moveDialogVisible" :formData="moveForm" @submit="moveSave" />
        <delet-dialog :dialogVisible.sync="deletDialogVisible" @submit="deletSave" />
    </div>
</template>

<script>
import {mapActions, mapMutations, mapState} from 'vuex';
import publicTable from '@/components/publicTable';
import deletDialog from '@/components/deletDialog';
import publicDialog from '@/components/publicDialog';
import {equipmentColumn} from '@/utils/column';
import {getUnitMap, getEquipmentMap, addEquipment, deleteEquipment, editEquipment} from '@/utils/api';
export default {
    name: 'equipment',
    components: {
        publicTable,
        publicDialog,
        deletDialog,
    },
    data() {
        return {
            equipmentColumn,
            active: '1',
            params: {
                // scene_id: '29',
                scene_id: '57',
                name: '',
                paged: 1,
                pageSize: 10,
            },
            unit: [],
            activeName: '---',
            tableData: [],
            addDialogVisible: false,
            addForm: {
                formConfig: [
                    {
                        type: 'input',
                        fieldName: 'name',
                        label: '设备名称',
                        required: true,
                    },
                    {
                        type: 'input',
                        fieldName: 'device_code',
                        label: '设备号',
                        required: true,
                    },
                ],
                otherConfig: {
                    title: '新增设备',
                    cancelBtn: '取消',
                    saveBtn: '保存',
                },
                form: {name: '', device_code: '', scene_id: ''},
            },
            item: {name: '', device_code: '', scene_id: ''},
            editDialogVisible: false,
            editForm: {
                formConfig: [
                    {
                        type: 'input',
                        fieldName: 'name',
                        label: '设备名称',
                        required: true,
                    },
                    {
                        type: 'input',
                        fieldName: 'device_code',
                        label: '设备号',
                        required: true,
                    },
                ],
                otherConfig: {
                    title: '编辑设备',
                    cancelBtn: '取消',
                    saveBtn: '保存',
                },
                form: {
                    name: 'ceshi',
                    name1: 'ceshittt',
                },
            },
            //迁移
            moveDialogVisible: false,
            moveForm: {
                formConfig: [
                    {
                        type: 'select',
                        options: [],
                        fieldName: 'scene_id',
                        placeholder: '请选择单位',
                    },
                ],
                otherConfig: {
                    title: '迁移设备',
                    cancelBtn: '取消',
                    saveBtn: '保存',
                },
                form: {
                    scene_id: '',
                },
            },
            deletDialogVisible: false,
            row: {},
            total: 0,
        };
    },
    activated() {
        (this.params = {
            // scene_id: '29',
            scene_id: '57',
            name: '',
            paged: 1,
            pageSize: 10,
        }),
            getUnitMap({
                name: '',
                paged: 1,
                pageSize: 5000,
            })
                .then(res => {
                    if (res.data.data) {
                        this.unit = res.data.data.map((item, index) => {
                            item.indexId = String(index + 1);
                            return item;
                        });
                        this.activeName = this.unit[0].name;
                        this.active = this.unit.find(item => item.name == this.activeName).indexId;
                        this.moveForm.formConfig[0].options = res.data.data.map(item => {
                            item.value = item.id;
                            item.label = item.name;
                            return item;
                        });
                    }
                })
                .catch(err => {
                    this.$message.error(err);
                });
        this.getEquipment(this.params);
    },
    deactivated() {},
    created() {
        // this.getEquipment(this.params);
    },
    methods: {
        ...mapMutations('equipment', ['updateEquipmentData']),
        getEquipment(params) {
            getEquipmentMap(params)
                .then(res => {
                    if (res.status == 2 && res.data && res.data.data) {
                        this.total = res.data.totalCount;
                        this.tableData = res.data.data.map((item, index) => {
                            item.indexId = (this.params.paged - 1) * this.params.pageSize + index + 1;
                            return item;
                        });
                    } else {
                        this.tableData = [];
                        this.total = 0;
                    }
                })
                .catch(err => {
                    this.$message.error(err);
                });
        },
        initEquipment() {
            //更新设备
            getEquipmentMap({
                scene_id: '',
                name: '',
                paged: 1,
                pageSize: 5000,
            }).then(res => {
                if (res.status == 2 && res.data && res.data.data) {
                    this.updateEquipmentData(res.data.data);
                } else {
                    this.updateEquipmentData([]);
                }
            });
        },
        handleRightBtn() {
            if (Number(this.active) >= this.unit.length) {
                this.active = Number(this.unit.length) + '';
            } else {
                this.active = Number(this.active) + 1 + '';
                this.activeName = this.unit.find(item => item.indexId == this.active).name;
                this.params.scene_id = this.unit.find(item => item.indexId == this.active).id;
                this.getEquipment(this.params);
            }
        },
        handleLeftBtn() {
            if (Number(this.active) <= 1) {
                this.active = '1';
            } else {
                this.active = Number(this.active) - 1 + '';
                this.activeName = this.unit.find(item => item.indexId == this.active).name;
                this.params.scene_id = this.unit.find(item => item.indexId == this.active).id;
                this.getEquipment(this.params);
            }
        },
        handleClick(tab) {
            this.params.paged = 1;
            this.activeName = tab.label;
            this.params.scene_id = this.unit.find(item => item.name == tab.label).id;
            this.getEquipment(this.params);
        },
        search() {
            this.getEquipment(this.params);
        },
        handleChange(e) {
            this.params.paged = e;
            this.getEquipment({...this.params});
        },
        add() {
            if (!this.params.scene_id || this.params.scene_id === '0') {
                this.$message({
                    message: '请先选定单位',
                    type: 'warning',
                });
                return;
            }
            this.addForm.form = JSON.parse(JSON.stringify(this.item));
            this.addDialogVisible = true;
        },
        addSave(val) {
            addEquipment({
                ...val,
                scene_id: this.params.scene_id,
            })
                .then(res => {
                    if (res.status === 2) {
                        this.getEquipment(this.params);
                        this.initEquipment();
                        this.addDialogVisible = false;
                        this.$message({
                            message: '新增设备成功',
                            type: 'success',
                        });
                    } else {
                        this.$message.error(res.statusMsg);
                    }
                })
                .catch(err => {
                    this.$message.error(err);
                });
        },
        editSave(val, type) {
            let value = JSON.parse(JSON.stringify(val));
            let valOld = {
                id: '48',
                scene_id: '30',
                name: 'SN00003',
                device_code: '00003',
                iot_node_type: '84',
                iot_protocal_category: 'ProtocalMing',
                infos: '',
                lonLat: '',
                frequency: '30',
                seq: '1',
            };
            let params = Object.keys(valOld).reduce((pre, cur) => {
                if (value[`${cur}`]) {
                    pre[`${cur}`] = String(value[`${cur}`]);
                } else {
                    pre[`${cur}`] = String(valOld[`${cur}`]);
                }
                return pre;
            }, {}); //后端要求这样传参数
            editEquipment(params)
                .then(res => {
                    if (res.status === 2) {
                        this.getEquipment(this.params);
                        this.editDialogVisible = false;
                        this.moveDialogVisible = false;
                        this.$message({
                            message: type === 'move' ? '迁移设备成功' : '编辑设备成功',
                            type: 'success',
                        });
                    } else {
                        this.$message.error(res.statusMsg);
                    }
                })
                .catch(err => {
                    this.$message.error(err);
                });
        },
        editRow(row, prop) {
            this.editForm.form = JSON.parse(JSON.stringify(row));
            this.editDialogVisible = true;
        },
        moveShow(row) {
            this.moveForm.form = JSON.parse(JSON.stringify(row));
            this.moveDialogVisible = true;
        },
        moveSave(val) {
            let type = 'move';
            this.editSave(val, type);
        },
        deleteRow(row) {
            this.row = row;
            this.deletDialogVisible = true;
        },
        deletSave() {
            deleteEquipment(this.row.id)
                .then(res => {
                    if (res.status === 2) {
                        this.getEquipment(this.params);
                        this.initEquipment();
                        this.deletDialogVisible = false;
                        this.$message({
                            message: '删除设备成功',
                            type: 'success',
                        });
                    } else {
                        this.$message.error(res.statusMsg);
                    }
                })
                .catch(err => {
                    this.$message.error(err);
                });
        },
    },
};
</script>
<style scoped>
.alter-css {
    width: 100%;
}
.equipment >>> .el-pagination {
    width: 100%;
    margin-bottom: 10px;
}
.alter-css >>> .el-tabs__item {
    line-height: 42px;
    background-image: url('@/assets/img/button-bj.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 160px;
    text-align: center;
    font-size: 16px;
    color: #ffffff;
}
.monitoring-nav >>> .el-tabs {
    margin: 0 auto;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.monitoring-nav >>> .el-tabs__nav-prev {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: block;
    flex-shrink: 0;
}
.monitoring-nav >>> .el-tabs__nav-wrap.is-scrollable {
    padding: 0 60px;
}
.monitoring-nav >>> [class^='el-icon-'] {
    width: 42px;
    height: 42px;
    display: flex;
    background: rgba(4, 44, 91, 0.02);
    box-shadow: inset 0px 0px 8px 0px #0e5fff;
    border-radius: 5px 5px 5px 5px;
    border: 1px solid #0e5fff;
    justify-content: center;
    align-items: center;
}
.monitoring-nav >>> .el-tabs__nav-prev {
    font-size: 24px;
}
.monitoring-nav >>> .el-tabs__nav-next {
    font-size: 24px;
}

.monitoring-nav >>> .el-tabs__nav-wrap::after {
    display: none;
}

.monitoring-nav >>> .el-tabs__content {
    display: none;
}

.monitoring-nav >>> .el-tabs__item {
    padding: 0;
    height: 42px;
    opacity: 0.5;
}

.monitoring-nav >>> .el-tabs__nav {
    justify-content: space-between;
    display: flex;
    gap: 10px;
}

.monitoring-nav >>> .is-active {
    opacity: 1;
}

.monitoring-nav >>> .el-tabs__active-bar {
    display: none;
}
.box-content >>> .table-class::-webkit-scrollbar {
    width: 4px; /* 设置滚动条的宽度 */
    height: 12px; /* 设置水平滚动条的高度（如果需要） */
}

/* 滚动条滑块 */
.box-content >>> .table-class::-webkit-scrollbar-thumb {
    background-color: #395ee2; /* 滑块的颜色 */
    border-radius: 2px; /* 滑块的圆角 */
}

/* 滚动条滑块在悬停时的颜色 */
.box-content >>> .table-class::-webkit-scrollbar-thumb:hover {
    background-color: #000000; /* 悬停时的颜色 */
}

/* 滚动条轨迹 */
.box-content >>> .table-class::-webkit-scrollbar-track {
    background-color: #000000; /* 轨迹的颜色 */
    border-radius: 6px; /* 轨迹的圆角 */
}
</style>

<style scoped lang="scss">
.equipment {
    padding: 0 10px;
    width: 100%;
    height: calc(100% - 55px);

    .bottom {
        // background-image: url('@/assets/img/right-top.png');
        position: relative;
        background-image: url('@/assets/img/atlas-message.png');
        background-size: 100% 100%;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        .title {
            color: #19ecff;
            font-size: 14px;
        }

        .middle {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            color: #ffffff;
            width: 100%;
            padding: 20px 0 10px;

            .el-input {
                width: 200px;
                margin-right: 10px;
            }

            ::v-deep .el-input__inner {
                background: #021045;
                border-radius: 4px 4px 4px 4px;
                border: 1px solid #00c2ff;
                font-size: 12px;
                height: 30px;
                width: 200px;
                color: #ffffff;
            }

            ::v-deep .el-button {
                background: #021c34;
                box-shadow: inset 0px 0px 8px 0px #00c2ff;
                border-radius: 4px 4px 4px 4px;
                color: #ffffff;
                font-size: 12px;
                padding: 0px 10px !important;
                // line-height: 20px;
                height: 30px;
                border: none;
            }
        }

        .middle-box {
            .el-input {
                width: 200px;
                margin-right: 10px;
            }

            ::v-deep .el-input__inner {
                background: #021045;
                border-radius: 4px 4px 4px 4px;
                border: 1px solid #00c2ff;
                font-size: 12px;
                height: 30px;
                width: 200px;
            }

            ::v-deep .el-button {
                background: #021c34;
                box-shadow: inset 0px 0px 8px 0px #00c2ff;
                border-radius: 4px 4px 4px 4px;
                color: #ffffff;
                font-size: 12px;
                padding: 0px 10px !important;
                // line-height: 20px;
                height: 30px;
                border: none;
                position: absolute;
                top: 10px;
                right: 20px;
            }
        }
    }
    ::v-deep .el-pagination.is-background .btn-next,
    ::v-deep .el-pagination.is-background .btn-prev,
    ::v-deep .el-pagination.is-background .el-pager li {
        background: rgba(4, 44, 91, 0.02);
        box-shadow: inset 0px 0px 8px 0px #0e5fff;
        border-radius: 5px 5px 5px 5px;
        border: 1px solid #0e5fff;
        color: #bbbdbf;
    }
    ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
        background: #0177fd;
    }
}

/* 组件样式 */
.atlas-message {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.monitoring-nav {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    overflow: hidden;
}

.button-box {
    line-height: 42px;
    background-image: url('@/assets/img/button-bj.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 160px;
    text-align: center;
    font-size: 16px;
    color: #ffffff;
}

.left-icon {
    background-image: url('@/assets/img/jt-left.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 42px;
    height: 42px;
}

.right-icon {
    background-image: url('@/assets/img/jt-right.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 42px;
    height: 42px;
}
</style>
